import SwiftUI
import UIKit
import Kingfisher
import ColorThiefSwift

struct ComicViewDetail: View {
    @Binding var item: MainPica
    @Binding var auto_read: Bool
    @State private var dominantColor: Color = Color("BgColor1")  // 初始值，后面会更新
    
    var body: some View {
        VStack(alignment: .leading) {
 
            KFImage(URL(string: item.cover)!)
                .resizable()
                .scaledToFill()  // 填充父视图的宽度，可能会裁剪图片的高度
                .frame(maxWidth: .infinity)  // 设置最大宽度为 100%，并限制高度为 200
                .clipped()  // 裁剪超出部分


            VStack {
                HStack {
                    Text(item.name)
                        .foregroundStyle(.white)
                        .lineLimit(1)
                        .font(.system(size: 26, weight: .bold))
                    Spacer()
                    
                    Text("共\(item.longs)话")
                        .foregroundStyle(.white)
                        .bold()
                        .padding(.vertical,4)
                        .padding(.horizontal,8)
                        .background(Color("MainColor"))
                        .clipShape(RoundedRectangle(cornerRadius: 30.0))
                }.padding(.top,10)
                
                HStack {
                    Text("\(item.read_count)万人气｜\(item.like_count)点赞")
                        .foregroundStyle(.gray)
                    Spacer()
                }
            }
            .padding(.horizontal)
            
            Text("\(item.desc)")
                .foregroundStyle(.gray)
                .padding(.horizontal)
            
            HStack {
                ForEach(item.tags.prefix(4), id: \.self) { tag in
                    Text(tag)
                        .font(.system(size: 14))
                        .foregroundStyle(.white)
                        .padding(6)
                        .background(Color.white.opacity(0.2))  // 背景色
                        .clipShape(RoundedRectangle(cornerRadius: 6))  // 圆角
                        .overlay(
                            RoundedRectangle(cornerRadius: 6)  // 边框的圆角
                                .stroke(Color.white, lineWidth: 1)  // 灰色边框
                        )
                        .padding(.trailing, 2)  // 每个标签之间有一些间距
                }
            }
            .padding(.horizontal)
            
            
            HStack {
                CachedImageView(imageURL: item.cover)
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 50, height: 50)
                    .clipShape(RoundedRectangle(cornerRadius: 30.0))
                VStack{
                    Text(item.author)
                        .lineLimit(1)
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity, alignment: .leading)
                    
                    Text(item.add_time)
                        .foregroundStyle(.gray)
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                
                Spacer()
                Button{
                    auto_read.toggle()
                }
                label:{
                    Text("自动阅读 >")
                        .foregroundStyle(.white)
                    
                }
                
                
                
            }
            .padding()
            
            Spacer()
        }
        .ignoresSafeArea(.all)
        .background(dominantColor)
        
    }
    private func extractDominantColor(from imageURL: String) {
           guard let url = URL(string: imageURL) else { return }
           
           // 从 URL 加载图像数据
           if let data = try? Data(contentsOf: url), let image = UIImage(data: data) {
               // 使用 ColorThiefSwift 提取主色
               if let dominantColor = ColorThief.getColor(from: image)?.makeUIColor() {
                   // 在主线程更新 UI
                   DispatchQueue.main.async {
                       self.dominantColor = Color(dominantColor)
                   }
               }
           }
       }
}

#Preview {
    @Previewable @State var item: MainPica = mainpicas[0]
    @Previewable @State var auto_read:Bool = false
    ComicViewDetail(item:$item,auto_read:$auto_read)
        .frame(height:300)
}
